I Ching: From Book to Website

Duration

7 weeks, fall 2025

Course

(Visual) Principles for Screen

Tools

Visual Studio Code, Figma

Books and websites are both systems for organizing and delivering information — yet they operate in fundamentally different ways. A book is linear, fixed, and physical; a website is non-linear, interactive, and dynamic. This project explores what happens when a highly structured book system is translated into a digital interface.

I Ching: From Book to Website is a conceptual and practical UX/UI project that reimagines the ancient Chinese text I Ching as an interactive web experience. The goal was not simply to digitize the book, but to reinterpret its internal logic, structure, and philosophy through modern interface design and front-end development.

The I Ching (Book of Changes) is one of the oldest known systems of knowledge organization. Its content is structured around 64 hexagrams, each representing a state of change, arranged through a highly systematic and mathematical logic.

What makes I Ching especially compelling for web design is that it already functions like a database:

• It is modular (64 individual units)
• It is non-linear (no single “correct” reading path)
• It is rule-based and indexed
• It relies on relationships between elements rather than narrative order

These qualities made I Ching an ideal subject for exploring how ancient systems can inform modern digital interfaces. This project became an investigation into system design, information architecture, and meaningful navigation rather than purely visual styling.

Phase 1: System Mapping & Research

Phase 2: Prototyping

Circular Navigation

After researching the Bagua and traditional I Ching diagrams, I chose a circular UI as the primary navigation system for the 64 hexagrams.

The final homepage centers around this circular interface, allowing users to engage with the system rather than passively read it.

Phase 3: Development

To bring the design to life, I built the website using HTML, CSS, and JavaScript.

The final website, which is designed to encourage exploration, reflection, and non-linear navigation, presents I Ching as an interactive system rather than a static text.

Users will be introduced to:

• A homepage with a continuously animated circular UI, allowing users to navigate through summaries of all 64 hexagrams while reflecting the cyclical philosophy of the I Ching


• An About section revealed through a slide-in side panel, enabling contextual information to appear without interrupting the main browsing experience

• A How-To page that explains how to perform an I Ching reading, guiding users through the traditional process and preparing them for interaction with the system

• A catalogue page that provides detailed information for each hexagram, including diagrams, Chinese characters, and textual descriptions

• A Play page, developed with JavaScript, where users can ask a question and perform an I Ching consultation. On the Play page, users can ask a question and simulate the traditional coin-flipping process. An algorithm randomizes the results, generates the corresponding hexagram, and guides the user back to the relevant hexagram page.

1. This project taught me how to design not just individual screens, but an entire system. Every UI decision — layout, navigation, interaction — was guided by a consistent underlying logic. This systems-based approach strengthened both the usability and conceptual clarity of the product.

2. There is an inevitable gap between what can be imagined in Figma and what can be achieved through code — and I learned to see this gap as valuable rather than limiting. Development constraints forced me to simplify, prioritize, and rethink interactions in ways that ultimately improved the final experience.